<template>
	<div id="login">
		<main>
			<h2>鹊桥相亲角后台管理系统</h2>
			<el-form>
				<el-form-item prop="userName" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="userPwd" :rules="[ { required: true, message: '请输入密码', trigger: 'blur' }]">
					<el-input prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item prop="captcha" :rules="[ { required: true, message: '请输入验证码', trigger: 'blur' }]">
					<div id="captcha">
						<el-input prefix-icon="el-icon-circle-check" placeholder="请输入验证码"></el-input>
						<img src="@/assets/images/captcha.gif">
					</div>
				</el-form-item>
			</el-form>
			<router-link to="/index">
				<el-button type="primary">登录</el-button>
			</router-link>
			
		</main>
	</div>
</template>

<script>

</script>

<style scoped>
	#login {
		width: 100%;
		height: 100vh;
		background: url("../../assets/images/logiBg.png") no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#login main {
		width: 500px;
		height: 300px;
		padding: 15px;
		box-sizing: border-box;
		background: #fff;
		border-radius: 8px;
	}
	
	#login main h2{
		font-weight: 500;
		text-align: center;
		margin-bottom: 15px;
	}
	.el-button{
		display: block;
		width: 180px;
		margin: 0 auto;
	}
	#captcha{
		display: flex;
	}
	#captcha img{
		height: 40px;
	}
	
</style>